<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>个人注册</title>
	<link rel="icon" href="./img/favicon.ico">


	<link rel="stylesheet" type="text/css" href="./css/all.css" />
	<link rel="stylesheet" type="text/css" href="./css/pages-register.css" />
</head>

<body>
<div id="app">
	<!--页面顶部-->
	<div id="nav-bottom">
		<!--顶部-->
		<div class="nav-top">
			<div class="top">
				<div class="py-container">
					<div class="shortcut">
						<ul class="fl">
							<li class="f-item">商城欢迎您！</li>
							<li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a href="register.html" target="_blank">免费注册</a></span></li>
						</ul>
						<div class="fr typelist">
							<ul class="types">
								<li class="f-item"><span>我的订单</span></li>

								<li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
								<li class="f-item"><span><a href="home.html" target="_blank">我的商城</a></span></li>
								<li class="f-item"><span>商城会员</span></li>
								<li class="f-item"><span>企业采购</span></li>
								<li class="f-item"><span>关注商城</span></li>
								<li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
								<li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>
								<li class="f-item"><span>网站导航</span></li>
							</ul>
						</div>

					</div>
				</div>
			</div>

			<!--头部-->
			<div class="header">
				<div class="py-container">
					<div class="yui3-g Logo">
						<div class="yui3-u Left logoArea">
							<a class="logo-bd" title="商城" href="index.html" target="_blank"></a>
						</div>
						<div class="yui3-u Rit searchArea">
							<div class="search">
								<form action="" class="sui-form form-inline">
									<!--searchAutoComplete-->
									<div class="input-append">
										<input type="text" id="autocomplete"  class="input-error input-xxlarge" />
										<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
									</div>
								</form>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>
	</div>

	<div class="register py-container ">

		<!--register-->
		<div class="registerArea">
			<h3>注册新用户<span class="go">我有账号，去<a href="login.html" target="_blank">登陆</a></span></h3>
			<div class="info">
				<form class="sui-form form-horizontal" onsubmit="return checkSub()" method="post" action="/registerServlet">
					<div class="control-group">
						<label class="control-label">用户名：</label>
						<div class="controls">
							<input type="text" placeholder="请输入你的用户名" class="input-xfat input-xlarge" onblur="checkUsername()" id="uname" required v-model="pojo.username">
							<span id="userSpan"></span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">手机号：</label>
						<div class="controls">
							<input type="text" placeholder="请输入你的手机号" maxlength="11" class="input-xfat input-xlarge" onblur="checkPhone()" id="phone" v-model="pojo.phone">
							<span id="phoneSpan"></span>
						</div>
					</div>
					<div class="control-group">
						<label for="inputPassword" class="control-label">验证码：</label>
						<div class="controls">
							<input type="text" v-model="inputCode" placeholder="请输入验证码，不区分大小写" class="input-xfat input-xlarge"  id="code">
<!--					验证码校验：		onblur="checkCodes()"-->
							<!-- canvas画布：验证码 -->
							<canvas class="codeCanvas" ref="checkCode" @click="getCode()" id="codeSpan"></canvas>
							<span id="codeSpan2"></span>
						</div>
					</div>
					<div class="control-group">
						<label for="inputPassword" class="control-label">登录密码：</label>
						<div class="controls">
							<input type="password"  placeholder="设置登录密码" class="input-xfat input-xlarge" name="pwd" id="pwd" onblur="checkPwd()" required v-model="pojo.password">
							<span id="pwdSpan"></span>
						</div>
					</div>
					<div class="control-group">
						<label for="inputPassword" class="control-label">确认密码：</label>
						<div class="controls">
							<input type="password"  placeholder="再次确认密码" class="input-xfat input-xlarge" onblur="checkPwd2()" id="pwd2" required v-model="password">
							<span id="pwd2Span"></span>
						</div>
					</div>
					<div class="control-group">
						<label for="inputPassword" class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="controls">
							<input  name="m1" type="checkbox" value="2" checked="" onclick="checkAgree()" id="agree"><span>同意协议并注册《品优购用户协议》</span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label"></label>
						<div class="controls btn-reg">
							<a class="sui-btn btn-block btn-xlarge btn-danger"  target="_blank" id="sub" @click="save()">完成注册</a>
						</div>
					</div>
				</form>
				<div class="clearfix"></div>
			</div>
		</div>
		<!--foot-->
		<div class="py-container copyright">
			<ul>
				<li>关于我们</li>
				<li>联系我们</li>
				<li>联系客服</li>
				<li>商家入驻</li>
				<li>营销中心</li>
				<li>手机品优购</li>
				<li>销售联盟</li>
				<li>品优购社区</li>
			</ul>
			<div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
			<div class="beian">京ICP备08001421号京公网安备110108007702
			</div>
		</div>
	</div>
</div>



</body>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">

	//校验用户名
	function checkUsername(){
		var username = document.getElementById("uname").value;
		var span = document.getElementById("userSpan");
		if(username==""||username==null){
			//输入校验结果
			span.innerHTML="*用户名不能为空";
			span.style.color="red";
			return false;
		}else if (username=="test"){
			span.innerHTML="*用户名已存在";
			span.style.color="red";
			return false;
		} else{
			span.innerHTML="*用户名通过";
			span.style.color="green";
			return true;
		}
	}
	//验证密码
	function checkPwd(){
		//获取用户获得用户名信息
		var pwd=document.getElementById("pwd").value;
		//获取span对象
		var span=document.getElementById("pwdSpan");
		//开始交验
		if(pwd==""||pwd==null){
			//输入校验结果
			span.innerHTML="*密码不能为空";
			span.style.color="red";
			return false;
		}else {
			//输入校验结果
			span.innerHTML="*密码通过";
			span.style.color="green";
			return true;
		}/*else{
				//输入校验结果
				span.innerHTML="*密码格式不符"
				span.style.color="red";
				return false;
			}*/
		//第一次密码为a123456，第二次密码为a1234567，则修改的第一次密码，确认密码也会重新校验
		checkPwd2();
	}
	//校验确认密码
	function checkPwd2() {
		// var reg = /^[a-z]\w{5,7}$/;
		//获取第一次校验密码
		var pwd = document.getElementById("pwd").value;
		//获取确认密码
		var pwd2 = document.getElementById("pwd2").value;
		//获取span对象
		var span = document.getElementById("pwd2Span");
		//比较前两次密码是否相同
		if (pwd2 == "" || pwd2 == null) {
			//输入校验结果
			span.innerHTML = "*密码不能为空";
			span.style.color = "red";
			return false;
		} else if (pwd !== pwd2) {
			//输入校验结果
			span.innerHTML = "*密码不同，请重新输入"
			span.style.color = "red";
			return false;
		} /*else if (!reg.test(pwd2)) {
				//输入校验结果
				span.innerHTML = "*密码格式不符"
				span.style.color = "red";
				return false;
			} */
		else {
			//输入校验结果
			span.innerHTML = "*密码通过";
			span.style.color = "green";
			return true;
		}
	}
	//校验手机号
	function checkPhone(){
		var reg=/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
		var phone = document.getElementById("phone").value;
		var span = document.getElementById("phoneSpan");
		if(phone==""||phone==null){
			//输入校验结果
			span.innerHTML="*手机号不能为空";
			span.style.color="red";
			return false;
		}else if(reg.test(phone)){
			//输入校验结果
			span.innerHTML="*手机号验证通过";
			span.style.color="green";
			return true;
		}else{
			//输入校验结果
			span.innerHTML="*请输入正确的手机号"
			span.style.color="red";
			return false;
		}
	}
	// 校验是否同意公司协议
	function checkAgree(){
		var confirmBox = document.getElementById("agree");
		if(confirmBox.checked){
			return true;
		}else{
			alert("请同意协议");
			return false;
		}
	}
	//提交判断
	function checkSub(){
		var flag = checkPwd()&&checkPwd2()&&checkPhone()&&checkUsername()&&checkAgree();
		return flag;
	}
	//----------------------------------------------------------------------------------------------------------------------
	//封装校验：相同的保留，不同的传参
	function checkField(id,reg){
		//获取用户数据
		var inp=document.getElementById(id);
		var	va=inp.value;
		var	alt=inp.alt;
		//创建校验规则
		//获取span对象
		var span=document.getElementById(id+"Span");
		//开始校验
		if(va==""||va==null){
			//输入校验结果
			span.innerHTML="*"+alt+"不能为空";
			span.style.color="red";
			return false;
		}else if(reg.test(va)){
			//输入校验结果
			span.innerHTML="*"+alt+"通过";
			span.style.color="green";
			return true;
		}else{
			//输入校验结果
			span.innerHTML="*"+alt+"格式不符";
			span.style.color="red";
			return false;
		}
	}

	new Vue({
		el:'#app',
		data(){
			return{
				pojo:{},
				password:'',
				inputCode: '',  // 输入的值
				checkCode: '',  // 图片验证码的值
				// canvas各种设置
				cvs: {
					w: 100, // 给出默认宽度  宽度会在图片绘制时根据长度更改
					h: 38,  // 高 与input保持一致
					fontSize: 24,   // 字体大小
					// 字符串生成范围
					str: '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM',
					len: 4, // 字符串长度
					line: 3 // 噪音线个数
				}
			}
		},
		mounted() { // 初始化先搞一个验证码~点击canvas的时候重新执行getCode()
			this.getCode(); // 获取验证码图
		},
		methods:{
			// 随机整数生成器，范围[0, max)
			rInt(max) {
				return Math.floor(Math.random() * 100000 % max);
			},
			// 生成随机字符串
			rCode() {
				let code = '';
				let len = this.cvs.len;
				let strLen = this.cvs.str.length;
				for(let i = 0; i < len; i ++) {
					code += this.cvs.str.charAt(this.rInt(strLen));
				}
				this.checkCode = code;
				return code;
			},
			// 生成随机颜色 rgba格式
			rColor() {
				let a = ((Math.random()*5 + 5) / 10).toFixed(2);
				return `rgba(${this.rInt(256)}, ${this.rInt(256)}, ${this.rInt(256)}, ${a})`
			},
			// 验证码图片绘制
			drawCode(domCvs) {
				let _this = this;
				// 随机字符串
				let checkCode = this.rCode();
				// 宽设置
				this.cvs.w = 10 + this.cvs.fontSize * this.cvs.len;

				// 判断是否支持canvas
				if(domCvs !== null && domCvs.getContext && domCvs.getContext('2d')){
					// 设置显示区域大小
					domCvs.style.width = _this.cvs.w;
					// 设置画板宽高
					domCvs.setAttribute('width', _this.cvs.w);
					domCvs.setAttribute('height', _this.cvs.h);
					// 画笔
					let pen = domCvs.getContext('2d');
					// 背景: 颜色  区域
					pen.fillStyle = '#eee';
					pen.fillRect(0, 0, _this.cvs.w, _this.cvs.h);
					// 水平线位置
					pen.textBaseline = 'middle';   // top middle bottom
					// 内容
					for(let i = 0; i < _this.cvs.len; i ++) {
						pen.fillStyle = _this.rColor(); // 随机颜色
						pen.font = `bold ${_this.cvs.fontSize}px 微软雅黑`; // 字体设置
						// 字符绘制: (字符, X坐标, Y坐标)
						pen.fillText(checkCode.charAt(i), 10 + _this.cvs.fontSize * i, 17 + _this.rInt(10));
					}
					// 噪音线
					for(let i = 0; i < _this.cvs.line; i ++) {
						// 起点
						pen.moveTo(_this.rInt(_this.cvs.w) / 2, _this.rInt(_this.cvs.h));
						// 终点
						pen.lineTo(_this.rInt(_this.cvs.w), _this.rInt(_this.cvs.h));
						// 颜色
						pen.strokeStyle = _this.rColor();
						// 粗细
						pen.lineWidth = '2';
						// 绘制
						pen.stroke();
					}

				} else {
					this.$message.error('不支持验证码格式，请升级或更换浏览器重试');
				}
			},

			getCode(){
				// vue的话可直接用$refs取值，不用vue的话可绑定id然后通过document处理
				let domCvs = this.$refs.checkCode;
				this.drawCode(domCvs);
			},

			save(){ //注册并验证
				// 空、 错误、 正确 三个判断
				if(this.inputCode) {
					var span = document.getElementById("codeSpan2");
					if(this.inputCode.toLowerCase() === this.checkCode.toLowerCase()) {
						span.innerHTML="*验证码通过";
						span.style.color="green";
						if (checkSub()===true){
							//添加用户
							axios.post(`/user/add.do`,this.pojo).then(response=>{
								if (response.data.code==1){
									//如果添加失败
									console.log(response.data.message)
									//this.$message.warning(response.data.message);
									alert(response.data.message)
								}else if (response.data.code==0){
									location.href='login.html';
								}
							})

						}
					} else {
						span.innerHTML="*验证码错误"
						span.style.color="red";
					}
				} else {
					span.innerHTML="*验证码不能为空";
					span.style.color="red";
				}
			}
		}
	});
</script>
</html>